/**
 *  目标一： 获取接口数据并渲染
 *  1.1 定义自己的外号
 *  1.2 通过自己的外号，发送异步请求，获取数据
 *  1.3 将获取的数据渲染
 */

// 获取标签元素
const tbody = document.querySelector('tbody')

// 1.1 定义自己的外号
const creator = '墨下皆是心酸'

// 因为，添加、删除、编辑后都要渲染一遍，所有分装一个渲染函数
function getBooksList() {
  // 1.2 通过自己的外号，发送异步请求，获取数据
  axios({
    url: 'http://localhost/books',
    // params: {
    //   creator
    // }
  }).then(result => {
    // 1.3 将获取的数据渲染
    // console.log(result.data.data);
    const list = result.data.data
    tbody.innerHTML = list.map((item, i) => {
      // 解构数据
      const { id, bookName, author, publisher } = item
      // console.log(id, bookName, author, publisher);
      return `
        <tr>
            <td>${i + 1}</td>
            <td>${bookName}</td>
            <td>${author}</td>
            <td>${publisher}</td>
            <td data-id =${id}>
              <span class="del">删除</span>
              <span class="edit">编辑</span>
            </td>
        </tr>
      `
    }).join('')

  })
}
getBooksList()



/**
 *  目标二：添加图书
 *  2.1 获取添加弹框d对象
 *  2.2 给保存按钮添加点击事件，收集表单信息，隐藏弹框
 *  2.3 通过获取的表单内容，发送异步请求
 *  2.4 清空表单，刷新图书列表
 */

// 2.1 获取 添加弹框 对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)

// 2.2 给保存按钮添加点击事件，收集表单信息，隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {
  // 获取添加弹框中的表单对象
  const addForm = document.querySelector('.add-form')
  // console.log(addForm);
  // 使用表单插件，获取表单信息
  const objBook = serialize(addForm, { hash: true, empty: true })
  // console.log(objBook);
  // 2.3 通过获取的表单内容，发送异步请求
  axios({
    url: "http://localhost/books",
    method: 'post',
    data: {
      // creator,
      ...objBook
    }
  }).then(result => {
    // 2.4 清空表单，刷新图书列表
    // console.log(result);
    // 刷新图书列表
    getBooksList()
    // 隐藏 添加弹框
    addModal.hide()
    // 清空表单
    addForm.reset()
  })
})

/**
 *  目标三：删除图书
 *  3.1 给 tbody 添加点击事件（事件委托）
 *  3.2 通过自定义属性，向接口发送异步请求，删除图书
 *  3.3 刷新图书列表
 */

tbody.addEventListener('click', e => {

  // 判断点击的是不是删除
  if (e.target.className === 'del') {
    // 是否删除弹框（提高数据安全性）
    if (!confirm('你确定要删除吗？')) {
      return
    }
    // console.log('你点击的是删除');
    // 获得父级身上的自定义属性
    const id = e.target.parentNode.dataset.id

    // 3.2 通过自定义属性，向接口发送异步请求，删除图书
    axios({
      url: 'http://localhost/books/' + id,
      method: 'delete'
    }).then(result => {
      // 3.3 刷新图书列表
      getBooksList()
    })
  }
})

/**
 *  目标四：修改图书
 *  4.1 给 tbody 添加点击事件（事件委托），显示弹框
 *  4.2 通过 id 发送异步请求，获取当前图书的信息，回显在表单上
 *  4.3 点击 修改 将修改后的数据提交给异步请求，隐藏弹框，刷新表单页面
 */

// 获取 编辑弹框对象
const editModalDOM = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editModalDOM)
// 4.1 给 tbody 添加点击事件（事件委托），显示弹框
tbody.addEventListener('click', e => {
  // 判断点击的是不是编辑
  if (e.target.className === 'edit') {
    // console.log('你点击的是编辑');
    // 获得父级身上的自定义属性
    const id = e.target.parentNode.dataset.id
    // 4.2 通过 id 发送异步请求，获取当前图书的信息，回显在表单上
    axios({
      url: 'http://localhost/books/' + id,
    }).then(result => {
      // console.log(result.data.data);
      // 因为，获取到的数据的 key 名刚好是每个表单的 类名
      // 所以，可以先获取响应数据中的所有 key，遍历回显
      const bookInfo = result.data.data
      // console.log(bookInfo)
      const keys = Object.keys(bookInfo)
      // console.log(keys);
      keys.forEach(key => {
        document.querySelector(`.edit-form .${key}`).value = bookInfo[key]
      })
      // 显示弹框
      editModal.show()
    })
  }
})

// 获取编辑弹框中的表单对象
const editForm = document.querySelector('.edit-form')
// 4.3 点击 修改 将修改后的数据提交给异步请求，隐藏弹框，刷新表单页面
document.querySelector('.edit-btn').addEventListener('click', () => {
  // 使用插件获取表单信息,并解构
  const objBook = serialize(editForm, { hash: true, empty: true })
  // console.log(objBook)
  // 将修改后的数据提交给异步请求
  axios({
    url: 'http://localhost/books/',
    method: 'put',
    data: {
      // creator,
      ...objBook
    }
  }).then(result => {
    // console.log(result);
    // 隐藏弹框
    editModal.hide()
    // 刷新图书列表
    getBooksList()
  })

})
